<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>
    <!--    引入Vue-->
    <script src="../../static/js/vue.js"></script>
</head>
<body>
<!--装备好一个容器-->
<div id="root">
    <form @submit="login">
        <label>账号:<input type="text" v-model.trim="form.name"></label><br><br>
        <label>密码:<input type="password" v-model="form.pwd"></label><br><br>
        <label>年龄:<input type="number" v-model.number="form.age"></label><br><br>
        性别: <span v-for="(item,index) in sex" :key="index">
        {{item.name}}:<input type="radio" v-model="form.sex" :value="item.value">
                </span><br><br>
        爱好:
        <template v-for="(item,index) in hobby">
            {{item.name}}:<input type="checkbox" v-model="form.hobby" :value="item.value">
        </template>
        <br><br>
        所属校区:
        <select v-model="form.city">
            <option value="">请选择</option>
            <option :value="item.value" v-for="item in school" :key="item.name">{{item.name}}</option>
        </select><br><br>
        <textarea v-model="form.intro" cols="30" rows="10"></textarea><br><br>
        <input type="checkbox" v-model="form.agree">请勾选 <a href="">用户协议</a><br><br>
        <button>提交</button>
    </form>
</div>
</body>
</html>
<script src="index.js"></script>
